<template>
    <div class="sort-selector">
        <el-input v-model="priorityInput" style="width: 60px" placeholder="优先级" @input="inputChange" />
        <el-button :type="sort.buttonType" @click="handleSort">{{ sort.name }}</el-button>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    priority: {
        type: Number,
        default: null,
    },
    sortType: {
        type: String,
        default: '1',
    }
})
let $emit = defineEmits(['update:priority', 'update:sortType'])
const priorityInput = ref<string | null>(null);
const sort = ref({ name: '升序', buttonType: 'success' })
function inputChange(value: string) {
    if(value == ''){
        $emit('update:priority', null);
        return;
    }
    const numericValue = Number(value);
    if (!isNaN(numericValue)) {
        $emit('update:priority', numericValue);
    } else {
        // 处理非数字输入的情况，比如警告或忽略
        ElMessage.warning('请输入数字');
    }
}
function handleSort() {
    if (sort.value.name === '升序') {
        sort.value.name = '降序'
        sort.value.buttonType = 'danger'
        $emit('update:sortType', '2')
    } else {
        sort.value.name = '升序'
        sort.value.buttonType = 'success'
        $emit('update:sortType', '1')
    }
}
onMounted(() => {
    if(props.priority){
        priorityInput.value = props.priority.toString()
    }
    if (props.sortType === '2') {
        sort.value.name = '降序'
        sort.value.buttonType = 'danger'
    }
})
</script>

<style scoped lang="scss">
.sort-selector .el-button {
    // position: fixed;
    margin-left: -2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
</style>